<template>
	<div>
		<!--头部-->
		<el-container>
			<el-header class="header">
				<el-row>
					<el-col :span="12">
						<div class="logo">
							<img src="../assets/logo.png" />
						</div>
					</el-col>
					<el-col :span="12">
						<div class="nav">
							<el-menu :default-active="activeIndex" active-text-color="#ffd04b" text-color="#fff" background-color="#545c64"
							 class="el-menu-demo" mode="horizontal" @select="handleSelect">
								<el-menu-item index='1'>个人中心</el-menu-item>
								<el-submenu index="2">
									<template slot="title">相册</template>
									<el-menu-item index="2-1">我的相册</el-menu-item>
								</el-submenu>
								<el-submenu index="3">
									<template slot="title">博客</template>
									<el-menu-item index="3-1">我的博客</el-menu-item>
								</el-submenu>
							</el-menu>
						</div>
					</el-col>
				</el-row>
			</el-header>
			<el-container>
			<!--左侧-->
			<el-aside class="side" width="200" >
				<el-menu :default-active="activeIndex" active-text-color="#ffd04b" text-color="#fff" background-color="#545c64"
				 class="el-menu-demo"  @select="handleSelect">
					<el-menu-item index='1'>个人中心</el-menu-item>
					<el-submenu index="2">
						<template slot="title">相册</template>
						<el-menu-item index="2-1">我的相册</el-menu-item>
					</el-submenu>
					<el-submenu index="3">
						<template slot="title">博客</template>
						<el-menu-item index="3-1">我的博客</el-menu-item>
					    <el-menu-item index="3-2">表格</el-menu-item>
						 <el-menu-item index="3-3">树</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>
			<el-container>
			<el-main>
				<router-view></router-view>
				<!--主题内容是一个路由。router-view-->
			</el-main>
			<el-footer class="footer">
				<center>2019Web前端</center>
			</el-footer>
			</el-container>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: "1"
			}
		},
		components: {

		},
		mounted(){
			this.$router.push("/layout1");
		},
		methods: {
			handleSelect(key, value) {
				console.log(key, value);
				if(key==="2-1"){
					this.$router.push("/form");
				}else if(key==="3-1"){
					this.$router.push("/element");
				}else if(key==="3-2"){
					this.$router.push("/table");
				}else if(key==="3-3"){
					this.$router.push("/tree");
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.logo {
		
		width: 100%;
		height: 60px;
	}
  .header{
	 background-color:#545b65 ;
   }
 .logo img {
		width: 161px;
		height: 100%;
		overflow:hidden;
	}
.nav {
		float: right;
	 }
{
	margin: 0px;
	padding: 0px;
}
 .side .el-menu-demo{
	 width: 200px;
	 height: 560px;
	 background-color:#545b65 ; 
 }
 .footer{
	 height: 50px;
 }
</style>
